<template>
  <view class="container">
    <!-- 左边列表 -->
    <scroll-view
      scroll-y="true"
      class="left"
      :scroll-top="leftScrollTop"
      scroll-with-animation
    >
      <view
        class="left-item"
        :class="{ active: active === index }"
        v-for="(item, index) in list"
        :key="item.id"
        @click="titleClick(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>

    <!-- 右边列表 -->
    <scroll-view
      class="right"
      scroll-y="true"
      @scroll="rightScroll"
      :scroll-top="scrollTop"
      scroll-with-animation
    >
      <view class="right-item" v-for="item in list" :key="item.id">
        <view class="item-title">{{ item.name }}</view>
        <view class="images-wrapper">
          <view class="images" v-for="image in item.images" :key="image">
            <view class="image"></view>
            <!-- <image class="image" :src="image" mode="widthFix"></image> -->
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      active: 0,
      rightItem: [],
      leftItem: [],
      scrollTop: 0,
      leftScrollTop: 0
    }
  },
  onLoad() {
    this.getData()
  },
  onReady() {
    this.getHeightArr()
  },
  watch: {
    leftScrollTop(value) {
      console.log(value)
    }
  },
  methods: {
    titleClick(index) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.active = index
        this.scrollTop = this.rightItem[index]
        clearTimeout(this.timer)
        this.timer = null
      }, 30)
    },
    rightScroll(e) {
      let scrollTop = e.detail.scrollTop
      let idx = this.rightItem.findIndex((item, index, arr) => {
        return scrollTop <= arr[index + 1] || !arr[index + 1]
      })
      this.active = idx
      this.leftScrollTop = this.leftItem[idx]
    },
    getData() {
      const list = []
      for (var i = 0; i < 20; i++) {
        let data = {}
        data.id = i
        data.name = "name" + i
        // let count = Math.floor(Math.random() * 3 + 3)
        data.images = this.generateOnlineImageArray(6, 460, 240)
        list.push(data)
      }
      this.list = list
    },
    generateOnlineImageArray(count, width, height) {
      const imageArray = []
      for (let i = 0; i < count; i++) {
        const imageUrl = `https://source.unsplash.com/random/${width}x${height}/?sig=${i}`
        imageArray.push(imageUrl)
      }
      return imageArray
    },
    getHeightArr() {
      uni
        .createSelectorQuery()
        .in(this)
        .selectAll(".right-item")
        .boundingClientRect((items) => {
          this.rightItem = items.map((i) => i.top)
        })
        .exec()

      uni
        .createSelectorQuery()
        .in(this)
        .selectAll(".left-item")
        .boundingClientRect((items) => {
          this.leftItem = items.map((i) => i.top)
        })
        .exec()
    }
  }
}
</script>

<style lang="scss" scoped>
view,
text {
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: calc(100vh - var(--status-bar-height) - var(--window-top));
  box-sizing: border-box;

  .left {
    float: left;
    width: 250rpx;
    height: 100%;
    background-color: yellowgreen;

    .left-item {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 30rpx;
      font-weight: bold;
      text-align: center;
      background-color: #eee;
      border-bottom: 1px solid #aaa;
      box-sizing: border-box;

      &.active {
        background-color: deepskyblue;
        color: #fff;
      }
    }
  }

  .right {
    width: calc(100% - 250rpx);
    height: 100%;
    overflow-y: scroll;

    .right-item {
      margin: 30rpx;
      .item-title {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        padding-left: 20rpx;
        font-weight: bold;
        background-color: #eee;
      }

      .images-wrapper {
        padding: 20rpx 0;
        overflow: hidden;

        .images {
          margin-bottom: 20rpx;
          height: 300rpx;

          .image {
            border-radius: 10rpx;
            width: 100%;
            height: 100%;
            background-color: skyblue;
          }
        }
      }
    }
  }
}
</style>
